<template>
  <el-dialog
    title="行程详情"
    :visible.sync="dialogVisible"
    width="820px">
    <el-tabs type="border-card" v-model="activeIndex">
      <el-tab-pane name="0" label="行程安排">
        <Plan ref="plan" :info-data="planInfo"/>
      </el-tab-pane>
      <el-tab-pane name="1" label="费用说明">
        <Info ref="cost" :info-data="contractInfo" :keys="key1"/>
      </el-tab-pane>
      <el-tab-pane name="2" label="服务信息">
        <Info ref="service" :info-data="contractInfo" :keys="key2"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import Info from "./info.vue";
import Plan from "./plan.vue";
import {getById, travelPlanList} from "@/api/product/tourproduct";
import {htmlKey1, htmlKey2} from "@/utils/getContractHtml";

export default {
  name: "print",
  components: {Info, Plan},
  data() {
    return {
      dialogVisible: false,
      activeIndex: '0',
      contractInfo: {},
      planInfo: [],
      key1: htmlKey1,
      key2: htmlKey2,
    }
  },
  methods: {
    open(id) {
      this.dialogVisible = true;
      if (!id) {
        this.$message.warning("产品id不存在")
        return
      }
      getById(id).then(res => {
        this.contractInfo = res.data
      })
      travelPlanList({productId:id}).then(res => {
        this.planInfo = res.rows
      })
    },
  },
}
</script>
